<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar fixed >
      <template #left>
        <van-icon @click="onBack" name="arrow-left" size="20px" color="gray" style="font-weight: bold;width: 20px"/>
      </template>
      <template #title>
        <span style="color: #FF8800;font-size: 18px">粉丝/关注</span>
      </template>
    </van-nav-bar>
    <div style="padding-top: 45px">
      <!-- 关注 -->
      <van-tabs v-model="tabId" swipeable sticky offset-top="45">
        <van-tab title="关注" class="tab-wrapper">
          <div v-for="(item, idx) in followList" :key="idx" style="padding: 0 20px;">
            <div style="display: flex;justify-content: space-between; align-items: center">
              <div class="tab-items" @click="onClickUser(item)">
                <van-image round :src="item.avatar" width="40px" height="40px"></van-image>
                <div class="nick">{{item.nick}}</div>
              </div>
              <div>
                <van-button v-if="parseInt($route.query.id)===$store.state.user.id" size="small" @click="onFollowBtnClick(idx, item)">{{ item.btnName }}</van-button>
              </div>
            </div>
            <div class="divider"></div>
          </div>
        </van-tab>
        <!-- 粉丝 -->
        <van-tab title="粉丝" class="tab-wrapper">
          <div v-for="(item, idx) in fanList" :key="idx" style="padding: 0 20px;">
            <div style="display: flex;justify-content: space-between; align-items: center">
              <div class="tab-items" @click="onClickUser(item)">
                <van-image round :src="item.avatar" width="40px" height="40px"></van-image>
                <div class="nick">{{item.nick}}</div>
              </div>
              <div>
                <van-button v-if="parseInt($route.query.id)===$store.state.user.id" size="small" @click="onFanBtnClick(idx)">{{item.btnName}}</van-button>
              </div>
            </div>
            <div class="divider"></div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Friend',
  data () {
    return {
      tabId: 0,
      fanList: [{ nick: '魏大爷', avatar: 'http://laoapp.antegg.net/img/avtar/8_1590087558_1.png' }, { nick: '魏大爷', avatar: 'http://laoapp.antegg.net/img/avtar/8_1590087558_1.png' }],
      followList: [{ nick: '魏大爷', avatar: 'http://laoapp.antegg.net/img/avtar/8_1590087558_1.png' }]
    }
  },
  methods: {
    // onLoad
    onLoad () {
      this.$api.getFollowFanListReq({ type: 0, userId: (parseInt(this.$route.query.id)) }).then(
        (resp) => {
          this.fanList = resp.fanList
          this.followList = resp.followList
          this.handleList()
        }
      )
    },
    // 处理数据
    handleList () {
      console.log('whatfuck！')
      for (let i = 0; i < this.followList.length; i++) {
        this.followList[i].btnType = this.getButtonType(1, i)
        if (this.followList[i].btnType === 0) {
          console.log('关注关注关注关注关注关注！', this.followList[i].id)
          this.followList[i].btnName = '关注'
        }
        if (this.followList[i].btnType === 1) {
          this.followList[i].btnName = '已关注'
        }
        if (this.followList[i].btnType === 2) {
          this.followList[i].btnName = '回关'
        }
        if (this.followList[i].btnType === 3) {
          this.followList[i].btnName = '互相关注'
        }
      }
      for (let i = 0; i < this.fanList.length; i++) {
        this.fanList[i].btnType = this.getButtonType(2, i)
        if (this.fanList[i].btnType === 0) {
          this.fanList[i].btnName = '关注'
        }
        if (this.fanList[i].btnType === 1) {
          this.fanList[i].btnName = '已关注'
        }
        if (this.fanList[i].btnType === 2) {
          this.fanList[i].btnName = '回关'
        }
        if (this.fanList[i].btnType === 3) {
          this.fanList[i].btnName = '互相关注'
        }
      }
    },
    // 返回
    onBack () {
      this.$router.back()
    },
    // 点击用户
    onClickUser (item) {
      this.$router.push({ path: '/userHome', query: { id: item.id } })
    },
    onFollowBtnClick (idx, item) {
      let flag = 0
      if (this.followList[idx].btnType === 0) {
        flag = 1
      }
      this.$api.followReq({ id: this.followList[idx].id, flag: flag }).then(
        (resp) => {
          if (resp.errMsg === 'OK') {
            if (flag === 0) {
              this.followList[idx].btnType = 0
            } else {
              this.followList[idx].btnType = 1
            }
            // 重新计算
            this.handleList()
            this.$forceUpdate()
          }
        }
      )
    },
    onFanBtnClick (idx) {
      let flag = 0
      if (this.fanList[idx].btnType === 0) {
        flag = 1
      }
      if (this.fanList[idx].btnType === 2) {
        flag = 1
      }
      if (this.fanList[idx].btnType === 3) {
        flag = 0
      }
      this.$api.followReq({ id: this.fanList[idx].id, flag: flag }).then(
        (resp) => {
          if (resp.errMsg === 'OK') {
            if (flag === 0) {
              for (let i = 0; i < this.followList.length; i++) {
                if (this.followList[i].id === this.fanList[idx].id) {
                  this.followList[i].btnType = 0
                }
              }
            } else if (flag === 1) {
              this.fanList[idx].btnType = 3
              let find = false
              for (let i = 0; i < this.followList.length; i++) {
                if (this.followList[i].id === this.fanList[idx].id) {
                  this.followList[i].btnType = 1
                  find = true
                  break
                }
              }
              if (!find) {
                this.followList.push(this.fanList[idx])
              }
            }
            // 重新计算
            this.handleList()
            this.$forceUpdate()
          }
        }
      )
    },
    getButtonType: function (type, idx) {
      let find = false
      if (type === 1) {
        if (this.followList[idx].btnType === 0) {
          return 0
        }
        let id = this.followList[idx].id
        for (let i = 0; i < this.fanList.length; i++) {
          if (this.fanList[i].id === id && this.fanList[i].btnType !== 0) {
            find = true
            break
          }
        }
        if (find) {
          return 3
        } else {
          return 1
        }
      } else if (type === 2) {
        if (this.fanList[idx].btnType === 0) {
          return 0
        }
        let id = this.fanList[idx].id
        for (let i = 0; i < this.followList.length; i++) {
          if (this.followList[i].id === id && this.followList[i].btnType !== 0) {
            find = true
            break
          }
        }
        if (find) {
          return 3
        } else {
          return 2
        }
      }
      return 0
    }
  },
  computed: {
  },
  mounted () {
    this.onLoad()
  }
}
</script>

<style scoped>
  .tab-wrapper{
    min-height: calc(100vh - 110px);
    padding-top: 20px;
  }
  .tab-items {
    margin: 0px 0 0px 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 70%;
  }
  .nick {
    margin-left: 10px;
    font-weight: bold;
    font-size: 18px
  }
  .divider{
    border-bottom: 1px solid #ebedf0;
    transform: scaleY(.5);
  }
</style>
